{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>增加题目</title>
<style type="text/css">
    .mui-content{margin: 0; padding-bottom: 50px;}
    .mui-input-group .mui-input-row:after{ left: 0;}
    .mui-input-group .mui-input-row:nth-child(3):after{ height: 0;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--题目详情-->
    <form class="mui-input-group">
        <div class="mui-input-row mb-input-row">
            <label>年级</label>
            <button id='showUserPicker' class="btn mui-btn mui-btn-block userResult">请选择</button>
            <i class="mui-icon mui-icon-arrowright"></i>
        </div>
        <div class="mui-input-row">
            <label>知识点</label>
            <input class="mui-text-right" type="text" placeholder="请输入知识点">
        </div>
        <div class="mui-input-row mui-input-rows mb-input-row">
            <label>题型选择</label>
            <button id='showUserPicker1' class="btn mui-btn mui-btn-block userResult1">请选择</button>
            <i class="mui-icon mui-icon-arrowright"></i>
        </div>

        <div class="add-task-cont">
            <h4 class="add-task-edit">编辑题目</h4>
            <div class="mb-topic task-tit">
                <textarea placeholder="请输入题目内容"></textarea>
            </div>
            <h4 class="add-task-edit">编辑备选答案</h4>
            <div class="mui-input-row">
                <label>答案A</label>
                <input class="mui-text-right" type="text" placeholder="请输入答案A">
            </div>
            <div class="mui-input-row">
                <label>答案B</label>
                <input class="mui-text-right" type="text" placeholder="请输入答案B">
            </div>
            <div class="mui-input-row">
                <label>答案C</label>
                <input class="mui-text-right" type="text" placeholder="请输入答案C">
            </div>
            <div class="mui-input-row">
                <label>答案D</label>
                <input class="mui-text-right" type="text" placeholder="请输入答案D">
            </div>
            <h4 class="add-task-edit">编辑正确答案</h4>
            <div class="mui-input-row">
                <label>正确答案</label>
                <input class="mui-text-right" type="text" placeholder="请输入正确答案的编号">
            </div>
            <h4 class="add-task-edit">编辑解析</h4>
            <div class="mb-topic task-cont">
                <textarea placeholder="请输入题目详细解析"></textarea>
            </div>
        </div>
</div>

<!--发帖子、提问-->
<div class="task-submit-btn">
    <input type="button" name="" id="" value="提交审核" onClick="location.href='add-task-succeed.html'"> />
</div>
</form>
{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript">
    (function($, doc) {
        $.init();
        //年级
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new $.PopPicker();
            userPicker.setData([{
                value: "yishang",
                text: "一年级上册"
            }, {
                value: 'yixia',
                text: '一年级下册'
            }, {
                value: 'ershang',
                text: '二年级上册'
            }, {
                value: 'erxia',
                text: '二年级下册'
            }, {
                value: 'sanshang',
                text: '三年级上册'
            }, {
                value: 'sanxia',
                text: '三年级下册'
            }, {
                value: 'sishang',
                text: '四年级上册'
            }, {
                value: 'sixia',
                text: '四年级下册'
            }, {
                value: 'wushang',
                text: '五年级上册'
            }, {
                value: 'wuxia',
                text: '五年级下册'
            }, {
                value: 'liushang',
                text: '六年级上册'
            }, {
                value: 'liuxia',
                text: '六年级下册'
            }, {
                value: 'qishang',
                text: '七年级上册'
            }, {
                value: 'qixia',
                text: '七年级下册'
            }, {
                value: 'bashang',
                text: '八年级上册'
            }, {
                value: 'baxia',
                text: '八年级下册'
            }, {
                value: 'jiushang',
                text: '九年级上册'
            }, {
                value: 'jiuxia',
                text: '九年级下册'
            }]);
            var showUserPickerButton = doc.getElementById('showUserPicker');
            var userResult = doc.getElementsByClassName('userResult')[0];
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    userResult.innerText = items[0].text;
                });
            }, false);
        });

        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new $.PopPicker();
            userPicker.setData([{
                value: "danxuan",
                text: "单选"
            }, {
                value: 'duoxuan',
                text: '多选'
            }, {
                value: 'tiankong',
                text: '填空'
            }, {
                value: 'panduan',
                text: '判断'
            }, {
                value: 'zuowen',
                text: '作文'
            }, {
                value: 'fenxi',
                text: '分析'
            }]);
            var showUserPickerButton = doc.getElementById('showUserPicker1');
            var userResult = doc.getElementsByClassName('userResult1')[0];
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    userResult.innerText = items[0].text;
                });
            }, false);
        });


    })(mui, document);
</script>
<!--flotdemo-->
{% endblock %}
